<template>
	<view>
		<!-- <template/> 不是一个组件，仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 -->
		<template v-if="userInfo">
			<view class="user_top">
				<view class="user_img">
					<image :src="userInfo.avatarUrl" class="avatar_img"></image>
				</view>
				<view class="user_name">
					<text>{{userInfo.nickName}}</text>
				</view>
			</view>
			<!-- 收藏列表 -->
			<navigator url="/pages/shopList/shopList" class="user_favor">
				<image src="/static/images/collectAct.png" class="collection_img" />
				<text class="collection_text">收藏列表</text>
				<text class="right-arrows"></text>
			</navigator>
		</template>

		<template v-else class="user_top">
			<button class="login_btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
				<image class="avatar_img"
					src="cloud://cloud1-1gdhleslb36b813b.636c-cloud1-1gdhleslb36b813b-1305427833/mdata/app/default_avatar.jpg">
				</image>
			</button>
			<view class="user_name">
				<text>点击登录</text>
			</view>
		</template>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: getApp().globalData.userInfo
			}
		},

		methods: {
			getUserInfo(res) {
				this.userInfo = res.detail.userInfo;
				getApp().globalData.userInfo = this.userInfo;
			}
		}
	}
</script>

<style>
	.user_top {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		padding: 24rpx 0 20rpx 0;
		background-color: #f2f9ff;
		border-bottom: 1rpx solid #DDDDDD;
	}

	.login_btn {
		border: none;
		background: none;
		padding: 0;
		line-height: 0;
	}

	.login_btn::after {
		border: none;
	}

	.user_img {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.avatar_img {
		border-radius: 50%;
		width: 200rpx;
		height: 200rpx;
		border: 2rpx solid #FFFFFF;
	}

	.user_name {
		font-size: 30rpx;
		margin-top: 18rpx;
		text-align: center;
	}

	.user_favor {
		width: 750rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #DDDDDD;
	}

	.collection_img {
		width: 32rpx;
		height: 32rpx;
		margin: 0 14rpx 0 30rpx;
	}

	.right-arrows {
		width: 18rpx;
		height: 18rpx;
		display: block;
		border-right: 1rpx solid;
		border-top: 1rpx solid;
		rotate: 45deg;
		float: right;
		margin: 40rpx 35rpx 0 0;
	}
</style>
